import React from 'react'
import PropTypes from 'prop-types'
import { observer, inject } from 'mobx-react'
import './noteEnd.scss'

@inject('UserStore')
@observer
class CheckMethod extends React.Component {
  static contextTypes = {
    router: PropTypes.object.isRequired,
  }
  constructor(props) {
    super(props)
    this.state = {
      type: 1,
    }
  }
  componentWillMount() {}
  componentDidUpdate() {}
  componentDidMount() {}
  componentWillUnmount() {}

  render() {
    let { mode, imgsArray, description } = this.props.UserStore
    let { type } = this.state
    return (
      <div className="note-end-container">
        <div className="method-bkg-area">
          {type === 1 && (
            <div className="method-title xuexiao">
              <div className="method-text">入围名单公布</div>
            </div>
          )}
          {type === 2 && (
            <div className="method-title jiating">
              <div className="method-text">入围名单公布</div>
            </div>
          )}
        </div>
        <div className="note-end-area">
          <div className="item-area">
            <div
              className={type === 1 ? 'type-item check' : 'type-item'}
              onClick={() => {
                this.setState({ type: 1 })
              }}
            >
              学校参赛
            </div>
            <div
              className={type === 2 ? 'type-item check' : 'type-item'}
              onClick={() => {
                this.setState({ type: 2 })
              }}
            >
              家庭参赛
            </div>
          </div>
          <div className="item-list">
            <div className="note-end-item">
              <div className="avatar-area">
                <img
                  src="https://img1.360buyimg.com/n6/jfs/t1/14408/33/2813/572263/5c206b43E958cb6f3/3a2694c88cb1eada.jpg"
                  alt=""
                />
                <div className="title-main">我的作品</div>
              </div>
              <div className="imgs-area">
                {imgsArray.map((item, index) => {
                  return (
                    <div className="img-item" key={index}>
                      <img className="img-main" src={item} alt="" />
                    </div>
                  )
                })}
              </div>
              <div className="desc-area">{description}</div>
            </div>
            <div className="note-end-item">
              <div className="avatar-area">
                <img
                  src="https://img1.360buyimg.com/n6/jfs/t1/14408/33/2813/572263/5c206b43E958cb6f3/3a2694c88cb1eada.jpg"
                  alt=""
                />
                <div className="title-main">我的作品</div>
              </div>
              <div className="imgs-area">
                {imgsArray.map((item, index) => {
                  return (
                    <div className="img-item" key={index}>
                      <img className="img-main" src={item} alt="" />
                    </div>
                  )
                })}
              </div>
              <div className="desc-area">{description}</div>
            </div>
          </div>
        </div>
      </div>
    )
  }
}

export default CheckMethod
